v-for リストレンダリング
Vue.jsの ディレクティブ
v-for リストレンダリング
配列 or オブジェクトのデータをリストレンダリング(繰り返しレンダリング)
パフォーマンスに対する工夫
配列を操作するメソッド　
push pop shift unshift　などでラップして変更を検知
key必須
ユニークkeyを指定する属性keyでリストのアイテムを識別可能にし、変更前後のリストの差分を検出
配列のマッピング
code:v-for.js
<ul id="example-1">
<li v-for="(item, index) in items", :key='index'>
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
オブジェクトの反復処理
code:v-for.js
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
注意
v-if v-showとv-forは、一緒に使わない
使うなら、templateで挟む
code:v-for.js
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
Component コンポーネント codeでv-forを使うときは、key必須
code:v-for.js
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id"
</my-component>
公式
リストレンダリング